<template>
  <div class="my-order page" ref="webview">
    <div ref="wrapper">
      <div class="hd-bar">
        <van-nav-bar title="我的订单" class="bg_transparent" left-arrow @click-left="$router.go(-1)"></van-nav-bar>
        <div class="order-pay-info">
          <div class="info">
            <span class="name">{{orderInfo.status_str}}</span>
            <span class="p">
              <template v-if="orderInfo.status==2">
                还剩
                <van-count-down class="time" :time="time" format="DD天HH时mm分ss秒" />自动确认
              </template>
              <template v-else-if="orderInfo.status==1">
                我们会尽快发货
              </template>
              <template v-else-if="orderInfo.status==4">
                订单已经完成了，期待你下次继续购买
              </template>
            </span>
          </div>
        </div>
      </div>
      <div class="user-info">
        <div class="rows" v-if="orderInfo.status==2">
          <div class="icon icon-logistics"></div>
          <div class="info">
            <div class="p">快递单号：{{orderInfo.logistics_no}}
              <span class="icon-copy" v-clipboard:copy="orderInfo.logistics_no" v-clipboard:success="onCopy" v-clipboard:error="onError"></span>
            </div>
          </div>
        </div>
        <div class="rows" v-if="orderInfo.name && orderInfo.mobile && orderInfo.address">
          <div class="icon icon-address"></div>
          <div class="info">
            <div class="name">{{ orderInfo.name }}
              <span class="tel">{{ orderInfo.mobile | phoneFilter}}</span>（收）</div>
            <div class="p">{{ orderInfo.address }}</div>
          </div>
        </div>
      </div>
      <div class="info-box goods-info">
        <div class="img">
          <van-image width="100%" :height="$tools.toPX(160)" fit="contain" lazy-load :src="orderInfo.goods_img">
            <template v-slot:loading>
              <van-loading type="spinner" size="24" />
            </template>
          </van-image>
        </div>
        <div class="info">
          <p class="name van-multi-ellipsis--l2">{{ orderInfo.goods_name }}</p>
          <div class="slot">
            <span class="c1">{{ orderInfo.norm_price }}</span>
            <span class="c2">x{{ orderInfo.num }}</span>
          </div>
        </div>
      </div>
      <div class="order-details-info">
        <div class="title">订单信息</div>
        <div class="p">订单编号: {{ orderInfo.order_no }}</div>
        <div class="p">创建时间: {{ orderInfo.create_time }}</div>
        <div class="p" v-if="orderInfo.pay_time">付款时间: {{orderInfo.pay_time}}</div>
        <div class="p" v-if="orderInfo.deliver_time">发货时间: {{orderInfo.deliver_time}}</div>
        <div class="p" v-if="orderInfo.receiving_time">成交时间: {{orderInfo.receiving_time}}</div>
      </div>
      <div class="bottomH"></div>
      <div class="operation" v-if="orderInfo.status==2">
        <span class="confirm" @click="isPopupShow=true">确认收货</span>
      </div>
      <van-popup v-model="isPopupShow" round position="bottom">
        <div class="confirm-goods">
          <div class="title_name">确认收货</div>
          <div class="confirm_info">您是否确认已经收到以下订单的商品？</div>
          <div class="info-box">
            <div class="img">
              <van-image width="100%" :height="$tools.toPX(160)" fit="contain" lazy-load :src="orderInfo.goods_img">
                <template v-slot:loading>
                  <van-loading type="spinner" size="24" />
                </template>
              </van-image>
            </div>
            <div class="info">
              <p class="name van-multi-ellipsis--l2">{{orderInfo.goods_name}}</p>
              <div class="slot">
                <span class="c1">订单编号：{{orderInfo.order_no}}</span>
              </div>
            </div>
          </div>
          <div class="tis">谨慎操作，如尚未收到商品，请不要点击确认！</div>
          <div class="submit">
            <span class="btn cancel" @click="isPopupShow= false">取消操作</span>
            <span class="btn confirm" @click="confirmrRecv">确认收货</span>
          </div>
        </div>
      </van-popup>
    </div>
  </div>
</template>
<script>
import mixins from '@/utils/mixins';
import dayjs from 'dayjs';
export default {
  name: 'orderDetails',
  data () {
    return {
      dataList: [],
      orderInfo: {},
      time: 604800 * 1000,
      isPopupShow: false,
      disabled: false,
      isLoading: false,
      loading: false,
      finished: false
    };
  },
  mixins: [mixins],
  created () {
  },
  mounted () {
    this.$nextTick(() => {
      this.fetchOrderDetail();
    });
  },
  methods: {
    onCopy () {
      this.$toast('复制成功');
    },
    onError () {
      this.$toast('复制失败');
    },
    fetchOrderDetail () {
      const options = { no: this.$route.query.order_no };
      this.$API.user.order(options, 'detail').then(res => {
        if (!res.code) {
          this.orderInfo = res.data;
          var _time = new Date(res.data.deliver_time).getTime() + 604800 * 1000;
          this.time = dayjs(_time).diff(dayjs(new Date().getTime()), 'second') * 1000;
        } else {
          this.$toast('复制失败');
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
.my-order {
  height: 100%;
  .hd-bar {
    background-color: #007aff;
    padding-bottom: 35px;
    .order-pay-info {
      display: flex;
      justify-content: space-between;
      padding: 20px 40px;
      .info {
        color: #fff;
        .name {
          font-size: 36px;
        }
        .p {
          font-size: 28px;
          font-weight: 300;
          padding: 10px 0;
          display: block;
          color: #fff;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          .van-count-down {
            color: #fff;
            vertical-align: middle;
          }
        }
      }
    }
  }
  .user-info {
    background-color: #fff;
    border-radius: 25px 25px 0 0;
    margin-top: -35px;
    .rows {
      display: flex;
      align-items: center;
      padding: 31px 0;
      margin: 0 20px;
      .icon {
        width: 80px;
        height: 80px;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 80px 80px;
      }
      .icon-logistics {
        background-image: url('/static/images/icon-logistics.png');
      }
      .icon-address {
        background-image: url('/static/images/icon-order-adderss.png');
      }
      .info {
        flex: 1;
        padding: 0 30px;
        font-size: 28px;
        color: #353535;
        .name {
          display: flex;
          font-weight: 500;
          .text {
            display: inline-block;
          }
        }
        .p {
          padding-top: 10px;
          .icon-copy {
            display: inline-block;
            width: 26px;
            height: 26px;
            background-image: url('/static/images/icon-copy-active.png');
            background-position: center center;
            background-repeat: no-repeat;
            background-size: 26px 26px;
            margin-left: 15px;
          }
        }
      }
    }
    .rows:first-child {
      border-bottom: 1px solid #eee; /*no*/
    }
  }
  .goods-info {
    background-color: #fff;
    padding: 20px 40px;
    margin-top: 20px;
  }
  .order-details-info {
    font-size: 28px;
    margin-top: 20px;
    background-color: #fff;
    padding: 20px 40px;
    .title {
      padding: 10px 0;
      font-weight: 500;
      color: #353535;
    }
    .p {
      padding: 10px 0;
      color: #555;
    }
  }

  .operation {
    text-align: right;
    padding: 15px 21px;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    border-top: 1px solid #eee; /*no*/
    .confirm {
      padding: 0 30px;
      height: 75px;
      line-height: 75px;
      border-radius: 75px;
      border: 1px solid #ff0000; /*no*/
      color: #ff0000;
      font-size: 28px;
      display: inline-block;
    }
  }
  .confirm-goods {
    padding: 20px 40px 0;
    .title_name {
      font-size: 40px;
      color: #353535;
      padding: 15px 0 0;
      text-align: center;
    }
    .confirm_info {
      padding: 30px 0;
      color: #353535;
      font-size: 34px;
      text-align: center;
    }
    .tis {
      padding: 30px 0;
      color: #555;
      font-size: 24px;
    }
    .info {
      padding: 15px 20px;
      .slot {
        padding: 15px 0 0;
      }
    }
    .submit {
      display: flex;
      margin: 0 -40px;
      border-top: 1px solid #eee; /*no*/
      .btn {
        flex: 1;
        font-size: 34px;
        padding: 34px 0 31px;
        text-align: center;
      }
      .btn:first-child {
        border-right: 1px solid #eee; /*no*/
      }
      .cancel {
        color: #999;
      }
      .confirm {
        color: #ff0000;
      }
    }
  }
}
</style>
